<template>
    <div>

        <table border="">
            <tr>
                <td>名称</td>
                <td>状态</td>
                <td>数量</td>
                <td>单价</td>
                <td>图片</td>
                <td>时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td>{{ item.mname }}</td>
                <td>{{ item.mstate }}</td>
                <td>{{ item.mnum }}</td>
                <td>{{ item.mprice }}</td>
                <td><img :src="item.mimage" alt="" width="50px" height="50px"></td>
                <td>{{ item.date }}</td>
                <td>
                    <input type="button" value="修改" @click="xiu(item.mid)">
                </td>
            </tr>
        </table>
        <a>
            当前第{{ state.index }}页共{{ pcount }}页 每页显示{{ state.size }} 条,共{{ count }} 条记录
            <input type="button" value="首页" @click="fenye(0)">
            <input type="button" value="上一页" @click="fenye(-1)">
            <input type="button" value="下一页" @click="fenye(1)">
            <input type="button" value="尾页" @click="fenye(9)">
        </a>
    </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, toRefs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
const route = useRoute();
const router = useRouter();
const data: any = reactive({
    state: {
        index: 1,
        size: 2
    },
    list: [],
    count: 0,
    pcount: 0
})

const { state, list, count, pcount } = toRefs(data);

onMounted(() => {
    showmember()
})


const showmember = () => {

    
    axios({
        url: 'https://localhost:7194/api/Member/showMember',
        method: 'get',
        params: state.value
    }).then((res) => {
        console.log(res)
        list.value = res.data.data
        data.count = res.data.count
        data.pcount = res.data.pcount
    })
}

const fenye = (num: number) => {
   if(num==0)
   {
    state.value.index=1
   }
   if(num==-1||num==1)
   {
    if(num==-1&&state.value.index==1)
    {
        return
    }
    if(num==1&&state.value.index==pcount.value)
    {
        return
    }
    state.value.index+=num
    }
    if(num==9)
    {
        state.value.index=pcount.value
    }
    showmember()
  
   }

const xiu=(mid:any)=>{
    router.push({path:'/MemberUpdate',query:{Mid:mid}})
}






</script>

<style scoped></style>